<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--        jQuery-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
    <!--        jQuery-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>展示页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bgc{
            background:url(images/demo-1-bg.jpg);
            background-size:100% 100%;
            width: 100%;
            height: 658px;
        }
        .jiemian,.touxiang,.tu{
            border-radius: 10px;
        }
        .touxiang{
            width: 27%;
            height: 192px;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            margin-left: 8px;
            margin-top: 10px;
        }
        .tu{
            width: 27%;
            height: 65%;
            background-color: rgba(0, 0, 0, 0.2);
            position: relative;
            top: 215px;
            float: left;
            margin-left: 8px;

        }
        .jiemian{
            width: 71%;
            height: 96%;
            background-color: #fff;
            position: relative;
            float: right;
            margin-top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
<div class="bgc">
    <div class="touxiang">

        <!--显示专注度-->
        <div id="container13" style="min-width:100%;height:100%"></div>

        <script type="text/javascript">

            // 定时刷新
            setInterval(function () {
                $(function(){
                    $.ajax({
                        type : 'post',
                        url: 'http://localhost:8080' + "/line/echarts",//调用后台接口获取折线图上的数据
                        dataType: "json",
                        success:function(result){
                            var dataList = result.dataList;//这个是Y轴的数据
                            var dateList = result.dateList;//这个是X轴的日期

                            //基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('container'));
                            option = {
                                tooltip: {
                                    // formatter: '{b0}<br />{a0}:{c0}<br />{a1}:{c1}%',
                                    trigger: 'axis',
                                    formatter: function (dataList) {
                                        var html;
                                        for(var i=0;i<dataList.length;i++){
                                            html = dataList[i].status+"%";//这里注意两个参数名不一样 data 和 date
                                        }
                                        return html;
                                    }
                                },
                                title: {
                                    text: '专注度'
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: [0, 0.01],
                                    data: result.dateList,
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                color:["#7CBBF0"],
                                series: [{
                                    //color: '#275F82', //改变区域颜色
                                    data: result.dataList,
                                    type: 'line',
                                    smooth: true,
                                    showAllSymbol : true,
                                    lineStyle:{  //折线图上线的颜色
                                        normal:{
                                            color:"#7CBBF0",
                                            width:3,
                                        },
                                    },
                                    // 显示数值，折线图上的点
                                    itemStyle : { normal: {label : {show: true}}}
                                }]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        }
                    })
                })
            },30000);


        </script>






        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
        <script type="text/javascript" src="js/chalk2.js"></script>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById("container13"),'chalk2');
            var app = {};

            var option;



            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {
                    data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 302, 301, 334, 390]
                    },
                    {
                        name: 'Mail Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90]
                    },
                    {
                        name: 'Affiliate Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: 'Video Ad',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 212, 201, 154, 190]
                    },
                    {
                        name: 'Search Engine',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 832, 901, 934, 1290]
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

        </script>
    </div>
    <div class="tu">
        <h2 style="text-align: center;color: #fff;line-height: 40px;">实时折线图</h2>
        <div id="container" style="height: 94.5%;"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
        <script src="js/customed.js"></script>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('container'), 'customed');
            var app = {};

            var option;

            option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '集中程度',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        </script>
    </div>
    <div class="jiemian">
        <video ishivideo="true" autoplay="true" isrotate="true" autoHide="true" controls="controls">
            <source src="test1.mp4" type="video/mp4">
        </video>
        <!--<h1 style="text-align: center;line-height: 640px;">网课画面</h1>-->
        <div style="width: 50px;height: 50px;background-color: rgb(159, 168, 170);
        position:relative;top:-625px;left:20px;border-radius: 50%;">
            <img src="images/齿轮.png" style="margin:5px;" alt="">
        </div>

        <div style="width: 40px;height: 40px;background-color: rgb(98, 205, 238);float: right;
        position:relative;bottom:150px;right:2px;border-radius: 5px;">
            <img src="images/画笔.png" style="margin:4px;" alt="">
        </div>
        <div style="width: 120px;
                    height: 150px;
                    float: right;
                    position:relative;
                    top:-685px;right:-35px;
                    border-radius: 5px;
                    background:url(images/demo-1-bg.jpg);
                    background-size:100% 100%;">

    </div>
</div>
</div>
</body>
</html>
